<template>
  <div class="list">
    <Header v-show="isShow"></Header>
    <section>
      <!-- 左侧菜单栏 -->
      <div class="listLeft" ref="left" >
        <ul>
          <li  v-for="(item,index) in leftData" :key="index" @click="goScroll(index)" :class="index==currentIndex ? 'active' :''">{{item.name}}</li>
      
        </ul>
      </div>
      <!-- 右侧分类栏 -->
      <div class="listRight" ref="right">
        <div>
          <ul v-for="(item,index) in rightData" :key="index" class="shop-list">
            <li  v-for="(k,i) in item" :key="i">
              <h2>{{k.name}}</h2>
              <ul class="r-content">
                <li v-for="(list,idx) in k.list" :key="idx" @click="go(list)">
                  <img :src="list.imgUrl" alt="">
                  <span>{{list.name}}</span>
                </li>
              </ul>
           </li>
          </ul>
          <div class="listBottom">
            <p>已经到底啦~~</p>
            
            
            <div class="bottomNull"></div>
          </div>
        </div>
       
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from '@/components/list/Header.vue'
import Tabbar from '../components/common/Tabbar.vue'

//引入axios的二次封装
import http from '@/common/api/request.js'

//引入滑动组件
import BetterScroll from 'better-scroll'

export default {
    name:"List",
    components:{
    Header,
    Tabbar,
  },
  data(){
    return{
      //左侧导航栏数据
      leftData:[],
      rightData:[],
      rightBScroll:'',//右侧滑动的事件
      allHeight:[],//右侧每一块高度的测量值
      scrollY:'',//右侧的滚动距离（正数）
      //头部导航栏是否显示
      isShow:true
    }
  },
  async created(){
    let res = await http.$axios({
      url:'/api/goods/list'
    })
    //因为原数组中的res返回的值除了想要的name 和id以外还有下一级也就是右侧的数据 所以要把name和id重构成另一个数组
    let leftArr=[]
    let rightArr=[]
    res.forEach(item =>{
      leftArr.push({
        id:item.id,
        name:item.name
      })
      rightArr.push(item.data)
    
    })
    this.leftData=leftArr
    this.rightData=rightArr 
    
    this.$nextTick(()=>{
      //左侧滑动
      new BetterScroll(this.$refs.left,{
        click:true,
      })

      //右侧滑动
      this.rightBScroll =new BetterScroll(this.$refs.right,{
        probeType:3,
        click:true,
        bounce:false
  
      })
      //统计右侧所有板块高度值 并且放allHeight数组中
      let height = 0 //height为目前模块的高度值 推荐为0 所以默认为0
      this.allHeight.push(height)
      //获取右侧每一块高度
      let uls =this.$refs.right.getElementsByClassName('shop-list')
      //把dom对象转换成数组
      Array.from(uls).forEach(v =>{
        height += v.clientHeight
        //遍历数组 每循环一次 高度=原高度+该模块高度 然后把高度放入数组 得到每个模块的高度
        this.allHeight.push(height)
      })
      //得到右侧滚动的值
      this.rightBScroll.on('scroll',(pos)=>{
        this.scrollY = Math.abs(pos.y)  
        if(this.scrollY >50){
          this.isShow =false
        }else{
          this.isShow =true
        } 
      })
 
        // 通过路由显示传参判断参数是否存在，如果存在证明是从首页的icon图标跳转来此
      if(this.$route.query.key){
        //使得构造一个新数组，由左侧菜单栏的名字组成
        let leftName = this.leftData.map(v=>{
          return v.name
        })
        //通过查询参数与数组中第几个相等 然后跳转至该模块
        let leftIndex = leftName.indexOf(this.$route.query.key)
        this.rightBScroll.scrollTo(0,-this.allHeight[leftIndex])
      }
      
    })
  },
  methods:{
    //绑定左侧的点击事件 并传递点击的下标
    goScroll(i){
     this.rightBScroll.scrollTo(0,-this.allHeight[i])
    },
    //点击分类小图标跳转至搜索并搜索小图标的名字
    go(i){
      this.$router.push({
        name:"search-list",
        query:{
          key:i.name
        }
      })
      console.log(i)
    }
  },
  computed:{
    currentIndex(){
      return this.allHeight.findIndex((item,index)=>{ 
      //findIndex方法返回的就是满足下列值的第一个结果 滑动的距离大于栏目的初始距离 小于下一个栏目的起始距离
       return this.scrollY >= item&& this.scrollY < this.allHeight[index+1]
      })
    }
  }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
.list{
  // display: flex;
  // margin-top: (40 / @rootsize);
  display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
  section{
    display: flex;
    flex: 1;
    // margin-bottom: (48 / @rootsize);
    .listLeft{
    width: (100  / @rootsize);
    height: 100%;
    overflow: hidden;
    ul{
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 1px solid #f5f5f5;
      height: 100%;
      li{
        width: 100%;
        margin: (20 / @rootsize) 0;
        padding: (5  / @rootsize) 0;
        font-size: (16 / @rootsize);
        text-align: center;
      }
    }
  }
  .listRight{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .shop-list{
      text-align: center;
      h2{
        padding: (10 / @rootsize) 0;
        font-size: (24 / @rootsize);
        font-weight: 400;
      }
      .r-content{
        display: flex;
        flex-wrap: wrap;
        margin-left: (10 / @rootsize);
        padding: (5 / @rootsize);
        li{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: (10  / @rootsize);
          width: (90  / @rootsize);
          height: (90  / @rootsize);
          
          img{
            width: (53  / @rootsize);
            height: (53  / @rootsize);
          }
          span{
            font-size: (14 / @rootsize);

          }
        }
      }
    }
  }
  .listBottom{
    width:100%;
    height: (550 / @rootsize);
    p{
      padding-top: (50 / @rootsize);
      text-align: center;
      font-size: (14  / @rootsize);
      color: #666;
    }
  }

  }
  
}
.active{
  color: #b54f4a;
  border-left: 5px solid #b54f4a;
}

::v-deep.tabbar{

  overflow: hidden;
  box-sizing: content-box;
  height: (60 / @rootsize);
  border-top: 1px solid #f5f5f5;
}

</style>